import React from 'react';
import { SAgTable } from 'suid-supplement';
import './styles.less';

const CustomButtonComponent = (props) => {
  console.log(props, 'CustomButtonComponent-props');
  return <div onClick={() => window.alert('clicked')}>Push Me!</div>;
};

export default () => {
  // console.log(olympicWinnersJson, 'olympicWinnersJson');
  return (
    <div
      className="ag-theme-quartz" // applying the Data Grid theme
      style={{ height: 400 }} // the Data Grid will fill the size of the parent container
    >
      <SAgTable
        rowData={[
          { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
          { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
          { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
        ]}
        columnDefs={[
          {
            field: 'make',
            filter: 'agSetColumnFilter',
          },
          { field: 'model' },
          {
            field: 'price',
            valueFormatter: (p) => '£' + p.value.toLocaleString(),
          },
          { field: 'electric' },
          {
            field: 'button',
            cellRenderer: CustomButtonComponent,
          },
        ]}
        defaultColDef={{
          flex: 1,
        }}
      />
    </div>
  );
};
